<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .container{
      width: 100vw;
      height: 100vh;
    }
    .main{
      width: 70%;
      height: 80%;
      border: 1px solid #000;
      overflow: hidden;
      position: relative;

    }
    .content{
      width: 10000px;
      height: 10000px;
      background-color: rgba(0,0,0,.1);
      position: relative;
      transform-origin: 0 0;
      top: 0;
      left: 0;
    }
    #parent{
      width: 100%;
      position: relative;
      /*border: 1px solid #000;*/
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    .redBox{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 100px;
      left: 100px;
    }
    .blackBox{
      width: 100px;
      height: 100px;
      background-color: black;
      position: absolute;
      top: 100px;
      left: 210px;
    }
    .control{
      position: fixed;
      top: 20px;
      left: 50px;
      width: 200px;
      height: 50px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      background-color: #fff;
    }
    .control .btn{
      cursor: pointer;
    }
  </style>
  <script src="js/jquery-1.11.0.min.js"></script>
  <script src="js/newmap.js"></script>
</head>
<body>
  <div class="container">
    <div class="main">
      <div class="content">
        <div id="parent">
          <div class="redBox">
            我是红色盒子
          </div>
        </div>
      </div>
    </div>
    <div class="control">
      <div class="btn" onclick="amplify(1)">+</div>
      <div class="btn" onclick="amplify(2)">-</div>
      <div class="btn" onclick="addDom()">添加一个元素</div>
    </div>
  </div>
<script>

  var scale = 1
  var amplify = function (num){
    if(num == 1){
      scale+=0.1
    }else {
      scale-=0.1
    }
    $('.content').css({
      '-webkit-transform': 'scale(' + scale + ')',
      '-moz-transform': 'scale(' + scale + ')',
      '-ms-transform': 'scale(' + scale + ')',
      '-o-transform': 'scale(' + scale + ')',
      'transform': 'scale(' + scale + ')'
    })
  }
  var addDom = function (){
    $('#parent').append(` <div class="blackBox">\\n' +
            '          我是黑色盒子\\n' +
            '        </div>`)
  }

  //拖拽功能实现
  //获取相关CSS属性
  var getCss = function (o, key) {
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
  };
  //拖拽的实现
  var startDrag = function (bar, target, callback) {
    $(document).mouseover(function(e){
      console.log('进入这里')
      // var isCanDrag = e.target.id=='container'
      if (getCss(target, "left") !== "auto") {
        params.left = getCss(target, "left");
      }
      if (getCss(target, "top") !== "auto") {
        params.top = getCss(target, "top");
      }
      //o是移动对象
      bar.onmousedown = function (event) {
        // if(!isCanDrag) return
        params.flag = true;
        if (!event) {
          event = window.event;
          //防止IE文字选中
          bar.onselectstart = function () {
            return false;
          }
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
      };
      document.onmouseup = function () {
        // if(!isCanDrag) return
        params.flag = false;
        if (getCss(target, "left") !== "auto") {
          params.left = getCss(target, "left");
        }
        if (getCss(target, "top") !== "auto") {
          params.top = getCss(target, "top");
        }
      };
      document.onmousemove = function (event) {
        // if(!isCanDrag) return
        var e = event ? event : window.event;

        if (params.flag) {
          var nowX = e.clientX, nowY = e.clientY;
          var disX = nowX - params.currentX, disY = nowY - params.currentY;
          target.style.left = parseInt(params.left) + disX + "px";
          target.style.top = parseInt(params.top) + disY + "px";

          if (typeof callback == "function") {
            callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
          }

          if (event.preventDefault) {
            event.preventDefault();
          }
          return false;
        }


      }

    })

  };
  startDrag(document.getElementById("parent"), document.getElementById("parent"))




</script>
</body>
</html>